/**
 * @功能描述: 折叠面板样式组件
 * @author: lzn
 * @date: 2022-09-28 17:25:30
 * @version: 1.0
 */
@import '../../style/index.scss';

// 折叠容器样式
@include b(collapse) {
  background-color: $background-color-base;
  border: $border-base;
  border-bottom: 0;
  border-radius: $border-radius-base;
  // 不带背景色和边框的样式
  &.#{$namespace}-collapse-ghost {
    border: none;
    background-color: $color-white;
    @include b(collapse-content) {
      border-top: none;
    }
  }
}

// 折叠项样式
@include b(collapse-item) {
  border-bottom: $border-base;
}

// 折叠项标题容器
@include b(collapse-header) {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 12px 16px;
  cursor: pointer;
}

// 折叠项箭头样式
@include b(collapse-icon) {
  display: inline-block;
  margin-right: 12px;
  font-size: 12px;
  vertical-align: -1px;
  // 收起状态旋转箭头方向
  &.collapse-icon-unexpand {
    transform: rotate(0.75turn);
  }
}

// 折叠项内容容器
@include b(collapse-content) {
  padding: 16px;
  background-color: $color-white;
  border-top: $border-base;
}

// 箭头在尾部的样式
@include b(collapse-icon-end) {
  @include b(collapse-header) {
    padding-right: 40px;
  }
  // 绝对定位重新定义箭头样式
  @include b(collapse-icon) {
    position: absolute;
    top: 50%;
    right: 16px;
    left: auto;
    margin: 0;
    transform: translateY(-50%);
    &.collapse-icon-unexpand {
      transform: translateY(-50%) rotate(0.75turn);
    }
  }
}